<template>
  <div class="container">
    <div class="app-container">
      <el-table
        class="biao"
        :data="tableData"
        max-height="650"
      >
        <el-table-column
          fixed
          prop="date"
          label="日期"
          width="180"
        />
        <el-table-column
          label="设备编码"
          width="150"
        >
          <template v-slot="{ row }">
            <span :key="row.zip">LX-{{ (Math.random() * 9000 + 1000).toFixed(0) }}-Y</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="city"
          label="故障号"
          width="150"
        />
        <el-table-column
          prop="address"
          label="故障信息"
          width="500"
        />
        <el-table-column
          prop="zip"
          label="序号"
          width="80"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2023-04-03',
        city: '03',
        address: '逆变器电路板故障',
        zip: 1
      }, {
        date: '2023-03-26',
        city: '03',
        address: '系统电路需要检测',
        zip: 2
      }, {
        date: '2023-01-22',
        city: '01',
        address: '光伏电站出现网络错误，检查网络',
        zip: 3
      }, {
        date: '2023-01-01',
        city: '02',
        address: '电网电压和频率过低',
        zip: 4
      }, {
        date: '2022-05-08',
        city: '01',
        address: 'GFCI故障,漏电流故障',
        zip: 5
      }, {
        date: '2022-10-06',
        city: '03',
        address: '监控无数据',
        zip: 6
      }, {
        date: '2022-08-17',
        city: '04',
        address: '对地绝缘阻抗过低',
        zip: 7
      }]
    }
  },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1)
    }
  }
}
</script>
<style scoped>
/* .app-container{
  margin-right: 100px;
} */
</style>
